<template>
  <div class="sec-top">
    <a href="#/" class="btn btn-sm btn-primary">返回闪屏任务列表</a>
  </div>
  <div class="form form-horizontal">
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">任务名</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" v-model="ad.name">
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">开始时间</label>
      <div class="col-sm-9">
        <vue-date-picker
          :time.sync="ad.startTime"
          :option='datePickerOption'
          ></vue-date-picker>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">结束时间</label>
      <div class="col-sm-9">
        <vue-date-picker
          :time.sync="ad.endTime"
          :option='datePickerOption'
          ></vue-date-picker>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">平台</label>
      <div class="col-sm-9">
        <label class="val">{{+ad.deviceType | platform}}</label>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="control-label col-sm-2">闪屏时长(秒)</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" v-model="ad.waitTime">
      </div>
    </div>
    <div class="form-group form-group-sm" v-if="+ad.deviceType === 2 || +ad.deviceType === 4">
      <label class="control-label col-sm-2">渠道地址</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" v-model="ad.channel">
      </div>
    </div>
    <template v-for="screen in ad.screens">
      <div class="pic-group">
        <div class="form-group form-group-sm">
          <label class="control-label col-sm-2 order">闪屏 {{$index+1}}<br>ID: {{screen.id}}</label>
          <div class="col-sm-9">
            <img :src=" screen.picurl.split(',')[0] " class="screen-img"><br>
            <a class="btn btn-xs btn-info" :href=" screen.picurl.split(',')[0] " target="_blank">查看大图（2208 x 1242）</a>
            <a class="btn btn-xs btn-info" v-if=" screen.picurl.split(',').length > 1 " :href=" screen.picurl.split(',')[1] " target="_blank">查看中图（1920 x 1080）</a>
            <a class="btn btn-xs btn-info" v-if=" screen.picurl.split(',').length > 2 " :href=" screen.picurl.split(',')[2] " target="_blank">查看小图（1280 x 720）</a>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="control-label col-sm-2">名称</label>
          <div class="col-sm-9">
            <label class="val">{{screen.title}}</label>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="control-label col-sm-2">跳转内容类型</label>
          <div class="col-sm-9">
            <label class="val">{{screen.type | adTypeTargetCase}}</label>
          </div>
        </div>
        <div class="form-group form-group-sm" v-if=" +screen.type !== -1 ">
          <label class="col-sm-2 control-label">{{screen.type | adTypeTargetCase}}</label>
          <div class="col-sm-9 text-left">
            <label class="val">{{screen.location}}</label>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-2 control-label">外部浏览器打开</label>
          <div class="col-sm-9 text-left">
            <label class="val">{{screen.forceexternalbrowser ? '是' : '否'}}</label>
          </div>
        </div>
      </div>
    </template>
    <div class="form-group">
      <div class="col-sm-9 col-sm-offset-2">
        <button class="btn btn-sm btn-danger" @click="deleteAd">删除</button>
        <button class="btn btn-sm btn-primary" @click="saveAd">保存</button>
      </div>
    </div>
  </div>
</template>
<style src="./flash-ad-detail.css" scoped></style>
<script src="./flash-ad-detail.js"></script>
